<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义混合模式</title>
  <style>
    body {
      margin: 0px;
      background-color: #111;
      overflow: hidden;
      font-family: arial;
    }

    .menu { color: #fff; font-weight: bold; font-size: 12px; z-index: 100; width: 75px; position: absolute; top: 0px; padding: 16px; }
    .menu img, .menu canvas { width: 75px; margin: 10px 0 }

    #images { background: rgba(0,0,0,0); left: 0px; }
    #backgrounds { background: rgba(0,0,0,0.0); left: 107px; }
    #labels { background: rgba(0,0,0,0.75); left: 214px; width: 100px }

    .lbl { color: #fff; z-index: 150; float:left; padding: 0.25em; width: 75px; display: block; cursor: pointer;  }
    #lbl_dst { background:#800; }
    #lbl_src { background:green; }

    .btn { background: darkorange; width: 100px; cursor: pointer; }

    #btn_sub { background: transparent }
    #btn_rsub { background: transparent }
    #btn_min { background: transparent }
    #btn_max { background: transparent }

    #btn_pre { background: transparent }

    #btn_max, #btn_nopre { margin-bottom: 2em }
  </style>
</head>
<body>
  <div id="images" class="menu">
    Foreground
    <a id="img_0" href="#"><img src="../../textures/disturb.jpg" /></a>
    <a id="img_1" href="#"><img src="../../textures/sprite0.jpg" /></a>
    <a id="img_2" href="#"><img src="../../textures/sprite0.png" /></a>
    <a id="img_3" href="#"><img src="../../textures/lensflare/lensflare0.png" /></a>
    <a id="img_4" href="#"><img src="../../textures/lensflare/lensflare0_alpha.png" /></a>
    <a id="img_5" href="#"><img src="../../textures/sprite/ball.png" /></a>
    <a id="img_6" href="#"><img src="../../textures/sprite/snowflake7_alpha.png" /></a>
  </div>

  <div id="backgrounds" class="menu">
    Background
    <a id="bg_0" href="#"><img src="../../textures/disturb.jpg" /></a>
    <a id="bg_1" href="#"></a>
    <a id="bg_2" href="#"></a>
    <a id="bg_3" href="#"><img src="../../textures/crate.gif" /></a>
    <a id="bg_4" href="#"><img src="../../textures/lava/lavatile.jpg" /></a>
    <a id="bg_5" href="#"><img src="../../textures/water.jpg" /></a>
    <a id="bg_6" href="#"><img src="../../textures/lava/cloud.png" /></a>
  </div>

  <div id="labels" class="menu">
    Equation<br/><br/>
    <div class="lbl btn equation" data-equation="AddEquation" id="btn_add">Add</div>
    <div class="lbl btn equation" data-equation="SubtractEquation" id="btn_sub">Subtract</div>
    <div class="lbl btn equation" data-equation="ReverseSubtractEquation" id="btn_rsub">ReverseSubtract</div>
    <div class="lbl btn equation" data-equation="MinEquation" id="btn_min">Min</div>
    <div class="lbl btn equation" data-equation="MaxEquation" id="btn_max">Max</div>

    Premultiply alpha<br/><br/>
    <div class="lbl bpn premultiply" id="btn_pre">On</div>
    <div class="lbl btn premultiply" id="btn_nopre">Off</div>

    Labels<br/><br/>
    <div class="lbl" id="lbl_src">Source</div>
    <div class="lbl" id="lbl_dst">Destination</div>
  </div>

  <script src="./_blending_custom.js" type="module"></script>
</body>
</html>